<template>
	<div class="material-inventory">
	  <el-card>
		<div class="toolbar">
		  <el-input
			v-model="filters.keyword"
			placeholder="物料名称/编号"
			clearable
			style="width:200px"
			@input="filterData"
		  />
		  <el-select
			v-model="filters.type"
			clearable
			placeholder="请选择物料类型"
			style="width:160px"
			@change="filterData"
		  >
			<el-option v-for="type in typeList" :key="type" :label="type" :value="type" />
		  </el-select>
		</div>
		<!-- 表格部分在上 -->
		<el-table
		  :data="filteredData"
		  border
		  stripe
		  size="small"
		  style="width:100%;margin-bottom:18px;"
		>
		  <el-table-column prop="materialNo" label="物料编号" width="120"/>
		  <el-table-column prop="materialName" label="物料名称" width="140"/>
		  <el-table-column prop="type" label="类型" width="110"/>
		  <el-table-column prop="spec" label="规格" width="110"/>
		  <el-table-column prop="unit" label="单位" width="60"/>
		  <el-table-column prop="stock" label="现存量" width="90">
			<template #default="scope">
			  <el-tag :type="scope.row.stock < scope.row.safeStock ? 'danger' : 'success'">
				{{ scope.row.stock }}
			  </el-tag>
			</template>
		  </el-table-column>
		  <el-table-column prop="safeStock" label="安全库存" width="90"/>
		  <el-table-column prop="supplier" label="供应商" />
		</el-table>
		<!-- 图表部分在下 -->
		<div style="padding:12px 0;">
		  <div style="font-weight:bold;margin-bottom:8px;">剩余库存对比</div>
		  <div ref="chartRef" style="width:100%;height:320px;"></div>
		</div>
	  </el-card>
	</div>
  </template>
  
  
  <script setup>
  import { ref, computed, onMounted, watch } from 'vue'
  import * as echarts from 'echarts'
  
  // 模拟物料库存数据
  const materialData = ref([
	{ materialNo: 'MAT-001', materialName: '头孢曲松钠原料', type: '抗生素', spec: '500g/瓶', unit: '瓶', stock: 220, safeStock: 100, supplier: '国药集团' },
	{ materialNo: 'MAT-002', materialName: '阿莫西林原粉', type: '抗生素', spec: '1000g/袋', unit: '袋', stock: 90, safeStock: 120, supplier: '华润医药' },
	{ materialNo: 'MAT-003', materialName: '葡萄糖', type: '辅料', spec: '25kg/包', unit: '包', stock: 60, safeStock: 50, supplier: '山东新华' },
	{ materialNo: 'MAT-004', materialName: '玻璃安瓿', type: '包装材料', spec: '10ml', unit: '箱', stock: 350, safeStock: 300, supplier: '恒瑞材料' },
	{ materialNo: 'MAT-005', materialName: '硫酸镁', type: '化学原料', spec: '10kg/袋', unit: '袋', stock: 45, safeStock: 60, supplier: '复星化工' },
	{ materialNo: 'MAT-006', materialName: '铝箔', type: '包装材料', spec: '200mm×0.02mm', unit: '卷', stock: 110, safeStock: 90, supplier: '山东恒力' }
  ])
  const typeList = ['抗生素', '辅料', '包装材料', '化学原料']
  
  const filters = ref({
	keyword: '',
	type: ''
  })
  
  const filteredData = computed(() => {
	return materialData.value.filter(item => {
	  const matchKeyword =
		!filters.value.keyword ||
		item.materialName.includes(filters.value.keyword) ||
		item.materialNo.includes(filters.value.keyword)
	  const matchType = !filters.value.type || item.type === filters.value.type
	  return matchKeyword && matchType
	})
  })
  
  function filterData() {
	renderChart()
  }
  
  // 剩余库存柱状图
  const chartRef = ref()
  let chart
  function renderChart() {
	if (!chart && chartRef.value) chart = echarts.init(chartRef.value)
	if (!chart) return
	const showData = filteredData.value.length ? filteredData.value : materialData.value
	chart.setOption({
	  tooltip: { trigger: 'axis' },
	  legend: { data: ['现存量', '安全库存'] },
	  grid: { left: 32, right: 16, bottom: 32, top: 40, containLabel: true },
	  xAxis: {
		type: 'category',
		data: showData.map(d => d.materialName),
		axisLabel: { rotate: 22 }
	  },
	  yAxis: { type: 'value' },
	  series: [
		{
		  name: '现存量',
		  type: 'bar',
		  data: showData.map(d => d.stock),
		  barWidth: 22,
		  itemStyle: { color: '#67C23A' }
		},
		{
		  name: '安全库存',
		  type: 'bar',
		  data: showData.map(d => d.safeStock),
		  barWidth: 22,
		  itemStyle: { color: '#E6A23C' }
		}
	  ]
	})
  }
  
  onMounted(() => {
	setTimeout(renderChart, 10)
  })
  watch(filteredData, renderChart)
  </script>
  
  <style scoped>
  .material-inventory {
	padding: 16px;
  }
  .toolbar {
	display: flex;
	gap: 12px;
	align-items: center;
	margin-bottom: 6px;
	flex-wrap: wrap;
  }
  </style>
  